<template>
  <div>
    <form style="text-align: right">
      <el-button type="primary" @click="search">查询</el-button>
    </form>

  <el-table
      :data="productAry"
      border
      style="width: 100%">
    <el-table-column
        prop="typeId"
        label="类型id"
        width="120">
    </el-table-column>

    <el-table-column
        prop="typeName"
        label="类型名称"
        width="200">
    </el-table-column>

    <el-table-column
        prop="parentId"
        label="上一级分类"
        width="200">
      <template slot-scope="scope">
        <span v-if="scope.row.parentId=='1'">食物</span>
        <span v-else-if="scope.row.parentId=='2'">电器</span>
        <span v-else-if="scope.row.parentId=='3'">服装</span>
        <span v-else-if="scope.row.parentId=='4'">数码</span>
        <span v-else></span>
      </template>
    </el-table-column>

    <el-table-column
        prop="level"
        label="类型级别"
        width="150">
      <template slot-scope="scope">
        <span v-if="scope.row.level=='1'">I级</span>
        <span v-else>II级</span>
      </template>
    </el-table-column>

    <el-table-column
        prop="status"
        label="是否删除"
        width="200">
      <template slot-scope="scope">
        <span v-if="scope.row.status=='C001-1'">未删除</span>
        <span v-else>已删除</span>
      </template>
    </el-table-column>

<!--    <el-table-column-->
<!--        label="操作"-->
<!--        width="400">-->
<!--      <template slot-scope="scope">-->
<!--        <el-button type="success" >编辑</el-button>-->
<!--        <el-button type="danger" >删除</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      productAry:[]
    }
  },
  methods: {

    async selectProductType() {
      const {data: res} =
          await this.$http.post('/community/productType/list')
      this.productAry = res

      console.log(this.productAry)
    },
    search(){
      this.selectProductType()
    }
  }

}
</script>

<style scoped>

</style>